<template>
  <div id="gzkz_bar" :style="{ width: '100%', height: '250px' }"></div>
</template>
<script>
import echarts from 'echarts'
let echartData = {}
export default {
  name: 'gzkz_bar',
  props: ['barData'],
  data: function() {
    return {}
  },
  watch: {
    barData: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      }
    }
  },
  mounted() {
    echartData = this.barData
    var myChart = echarts.init(document.getElementById('gzkz_bar'))
    const option = {
      title: {
        text: '故障分类统计',
        left: '0',
        top: '0',
        textStyle: {
          fontSize: 16,
          color: '#2F3033'
        }
      },
      backgroundColor: '#fff',
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}个'
      },
      grid: {
        left: '5%',
        top: '17%',
        bottom: '12%',
        right: '5%',
      },
      xAxis: {
        data: echartData.arr1,
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 129, 109, 0.1)',
            width: 1 // 这里是为了突出显示加上的
          }
        },
        axisLabel: {
          textStyle: {
            color: '#999',
            fontSize: 12
          }
        }
      },
      yAxis: [
        {
          splitNumber: 5,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 129, 109, 0.1)',
              width: 1 // 这里是为了突出显示加上的
            }
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          },
          splitArea: {
            areaStyle: {
              color: 'rgba(255,255,255,.5)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 129, 109, 0.1)',
              width: 0.5,
              type: 'dashed'
            }
          }
        }
      ],
      series: [
        {
          name: 'hill',
          type: 'pictorialBar',
          barCategoryGap: '0%',
          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
          label: {
            show: true,
            position: 'top',
            distance: 0,
            color: '#DB5E6A',
            fontWeight: 'bolder',
            fontSize: 13,
            z: 100
          },
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(232, 94, 106, .8)' //  0%  处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(232, 94, 106, .1)' //  100%  处的颜色
                  }
                ],
                global: false //  缺省为  false
              }
            }
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(232, 94, 106, .8)' },
                { offset: 0, color: 'rgba(232, 94, 106, .1)' },
                { offset: 1, color: 'rgba(232, 94, 106, .8)' }
              ])
            }
          },
          data: echartData.arr2
          // z: 10
        }
      ]
    }
    myChart.setOption(option)
    window.addEventListener('resize', function() {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  }
}
</script>
<style lang="scss"></style>
